<!--
 * @Author: mhb
 * @Date: 2021-09-30 09:41:22
 * @LastEditTime: 2021-09-30 10:37:26
 * @LastEditors: mhb
 * @Description: 实测实量地图右侧边栏：点位详情
 * @FilePath: \cscec-pms-admin\src\views\quality\measuredAmount\map\components\MapSideBarRight.vue
-->
<template>
  <!-- 点位详情 -->
  <a-col :span="4">
    <a-card :loading="loading || recordLoading" :bordered="false" style="margin: 0">
      <div :style="'display: flex; flex-direction: column; height: 100%; width: 100%; height: calc('+GET_REDRESS_PERCENTAGE+'vh - 54px)'">
        <template v-if="Object.keys(currentPoint).length">
          <!-- 点位名称 -->
          <div align="center" class="mb12">
            <b>{{ currentPoint.name }} {{ currentPoint.pointName }}</b>
          </div>
          <!-- 测量信息 -->
          <div class="mb12" v-if="isView && measureResult && !measureResult.isMark">
            <div>分部分项：{{ measureResult.partName || '无' }}</div>
            <div>测量人：{{ measureResult.measurementPersonName || '无' }}</div>
            <div>
              测量时间：{{ (measureResult.measurementDate && measureResult.measurementDate.split(' ')[0]) || '无' }}
            </div>
            <div>
              点位测量结果：<span
                :style="{
                  color: !measureResult.isMeasure ? 'initial' : measureResult.isQualified ? '#70B603' : '#ff3333'
                }"
                >{{ measureResult.isMeasure ? (measureResult.isQualified ? '合格' : '不合格') : '未完成测量' }}</span
              >
            </div>
          </div>
          <!-- 检查项列表 -->
          <div class="mb12 detailBox">
            <!-- 有测量结果则遍历测量检查项，否则遍历未测量检查项 -->
            <a-card v-for="(item, index) in checkItemList" :key="index">
              <!-- 已测量检查项 -->
              <template v-if="isView && measureResult && !measureResult.isMark">
                <!-- 检查项名称 -->
                <div class="mb12">检查项名称：{{ item.checkName }}</div>
                <!-- 判定类型 -->
                <a-row class="mb12" type="flex" align="middle" style="flex-wrap: nowrap">
                  <span style="flex-shrink: 0">{{ item.judgmentType.name }}：</span>
                  <span
                    v-if="
                      item.judgmentType.code === '0' || item.judgmentType.code === '2' || item.judgmentType.code === '3'
                    "
                    >{{
                      item.judgmentType.code === '2'
                        ? item.qualified
                          ? '合格'
                          : '不合格'
                        : item.judgmentType.code === '0'
                        ? item.standardVal
                        : item.designVal
                    }}</span
                  >
                  <BaseInputNumber
                    v-if="item.judgmentType.code === '1' || item.judgmentType.code === '4'"
                    :disabled="!!isView"
                    :max="100000000"
                    :min="0"
                    size="small"
                    v-model="item.designVal"
                    placeholder="请输入"
                  ></BaseInputNumber>
                </a-row>
                <!-- 偏差值 -->
                <a-row
                  v-if="item.judgmentType.code !== '2'"
                  class="mb12"
                  type="flex"
                  align="middle"
                  justify="space-between"
                  style="flex-wrap: nowrap"
                >
                  <div>最小偏差值：{{ item.negativeVal }}</div>
                  <div>最大偏差值：{{ item.positiveVal }}</div>
                </a-row>
                <a-row
                  class="mb12"
                  type="flex"
                  align="middle"
                  style="flex-wrap: nowrap"
                  v-if="item.formulaeValueVO && item.formulaeValueVO.pjthsd"
                >
                  <span style="flex-shrink: 0">平均碳化深度：</span>
                  <BaseInput v-model="item.formulaeValueVO.pjthsd" disabled />
                </a-row>
                <a-row
                  class="mb12"
                  type="flex"
                  align="middle"
                  style="flex-wrap: nowrap"
                  v-if="item.judgmentType.code !== '4' && item.value"
                >
                  <span style="flex-shrink: 0">测量值：</span>
                  <BaseInput v-model="item.value" disabled />
                </a-row>
                <template v-if="item.judgmentType.code === '4'">
                  <a-row
                    class="mb12"
                    type="flex"
                    align="middle"
                    style="flex-wrap: nowrap"
                    v-for="(i, index) in item.formulaeValueVO ? item.formulaeValueVO.valueNew : []"
                    :key="index"
                  >
                    <span style="flex-shrink: 0">测量值：</span>
                    <BaseInput :value="i" disabled />
                  </a-row>
                </template>
                <div>
                  点位测量结果：<span :style="{ color: item.qualified ? '#70B603' : '#ff3333' }">{{
                    $isEmpty(item.qualified) ? '未测量' : item.qualified ? '合格' : '不合格'
                  }}</span>
                </div>
              </template>
              <!-- 未测量检查项 -->
              <template v-else>
                <!-- 检查项名称 -->
                <div class="mb12">检查项名称：{{ item.checkItemName }}</div>
                <!-- 判定类型 -->
                <a-row class="mb12" type="flex" align="middle" style="flex-wrap: nowrap">
                  <span style="flex-shrink: 0">{{ item.judgmentType }}：</span>
                  <span v-if="item.judgmentTypeCode == 0 || item.judgmentTypeCode == 2 || item.judgmentTypeCode == 3">{{
                    (item.judgmentTypeCode == 3 ? item.designVal : item.standardValue) || 0.0
                  }}</span>
                  <BaseInputNumber
                    v-if="item.judgmentTypeCode == 1 || item.judgmentTypeCode == 4"
                    :disabled="!!isView"
                    :max="100000000"
                    :min="0"
                    size="small"
                    v-model="item.designVal"
                    placeholder="请输入"
                  ></BaseInputNumber>
                  <!-- </a-form-model-item>
                      </a-form-model> -->
                </a-row>
                <!-- 偏差值 -->
                <a-row
                  v-if="item.judgmentTypeCode != 2"
                  class="mb12"
                  type="flex"
                  align="middle"
                  justify="space-between"
                  style="flex-wrap: nowrap"
                >
                  <div>最小偏差值：{{ item.negativeDeviation }}</div>
                  <div>最大偏差值：{{ item.positiveDeviation }}</div>
                </a-row>
              </template>
            </a-card>
          </div>
        </template>
        <empty v-else description="暂无点位信息" />
        <div v-if="!isView" align="center" v-btnPermission="'qm_010_add_04'">
          <a-button
            :loading="spinning"
            :disabled="selectedKeys.length === 0 || pointList.length === 0"
            type="primary"
            icon="form"
            @click="$emit('handleSubmit')"
            >提交</a-button
          >
        </div>
      </div>
    </a-card>
  </a-col>
</template>

<script>
import { Empty } from 'ant-design-vue' // 无数据提示
import {mapGetters } from 'vuex'
export default {
  name: 'MapSideBarRight',
  components: {
    Empty
  },
  props: {
    // 通用请求api
    api: {
      type: [Function, Object, Promise]
    },
    // 选中点位对象
    currentPoint: {
      type: Object,
      default: () => ({})
    },
    // 点位坐标列表
    pointList: {
      type: Array,
      default: () => []
    },
    // 点位信息加载控件
    loading: {
      type: Boolean,
      default: () => false
    },
    // 责任区域详情对象
    datas: {
      type: Object,
      default: () => ({})
    },
    // 选中树节点
    selectedKeys: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isView: this.$route.query.isView, // 是否为查看操作
      measureResult: null, // 测量结果
      spinning: false, // 提交表单加载控件
      recordLoading: false // 请求测量结果loading
    }
  },
  computed:{
    ...mapGetters(['GET_REDRESS_PERCENTAGE']),
      // 检查项列表
    checkItemList() {
      return this.measureResult?.isMark || !this.isView
        ? this.currentPoint?.checkItems
        : this.measureResult?.results || []
    },
  },
  methods: {
    /**
     * @description: 获取测量结果详情
     */
    getMeasureInfo() {
      const chooseItem = this.currentPoint // 选中点位
      // 若是查看模式，则需请求测量结果，若有测量结果则映射
      if (this.isView && chooseItem?.mapId) {
        const args = {
          mapId: this.datas.id,
          nodeId: chooseItem.mapId
        }
        this.recordLoading = true
        this.api
          ?.record(args)
          .then((res) => {
            this.recordLoading = false
            this.measureResult = res.code === 200 ? res.data : null
          })
          .catch(() => {
            this.measureResult = null
            this.recordLoading = false
          })
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .detailBox {
  height: 100%;
  overflow: scroll;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
  scrollbar-track-color: #fff;
  -ms-scrollbar-track-color: transparent;
  &::-webkit-scrollbar {
    background: #fff;
    width: 8px;
    height: 8px;
    // display: none;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    width: 8px;
    border-radius: 8px;
    border: 1px #fff solid;
    background: #ccc;
  }
  // .ant-form-item .ant-form-item-control-wrapper {
  //   width: 100%;
  //   .ant-input-number-input {
  //     border-color: #e4ac0b;
  //     background-color: #fff9e8;
  //   }
  // }
}
</style>